<template>
  <view class="container">
    <!-- 顶部标题区域 -->
    <view class="header-section">
      <view class="title-wrapper">
        <text class="main-title">扫码点餐</text>
        <text class="sub-title">请扫描桌上的二维码开始点餐</text>
      </view>
    </view>

    <!-- 扫码区域 -->
    <view class="scan-area">
      <!-- 扫码框 -->
      <view class="scan-frame">
        <view class="scan-corners">
          <view class="corner corner-tl"></view>
          <view class="corner corner-tr"></view>
          <view class="corner corner-bl"></view>
          <view class="corner corner-br"></view>
        </view>
        
        <!-- 扫描线动画 -->
        <view class="scan-line"></view>
        
        <!-- 扫码按钮 -->
        <button class="scan-btn" @click="scanQRCode">
          <view class="scan-icon-wrapper">
            <u-icon name="scan" size="80" color="#2575fc" />
          </view>
          <text class="scan-text">点击扫描</text>
        </button>
      </view>
      
      <!-- 提示文字 -->
      <view class="tips-section">
        <view class="tip-item">
          <u-icon name="info-circle" size="32" color="rgba(255,255,255,0.8)" />
          <text class="tip-text">请将二维码放入扫描框内</text>
        </view>
        <view class="tip-item">
          <u-icon name="checkmark-circle" size="32" color="rgba(255,255,255,0.8)" />
          <text class="tip-text">扫码成功后自动跳转点餐页面</text>
        </view>
      </view>
    </view>

    <!-- 底部功能区 -->
    <view class="bottom-section">
      <view class="feature-cards">
        <view class="feature-card">
          <u-icon name="shopping-cart" size="40" color="#FFD700" />
          <text class="feature-text">快速点餐</text>
        </view>
        <view class="feature-card">
          <u-icon name="star" size="40" color="#FF69B4" />
          <text class="feature-text">会员优惠</text>
        </view>
        <view class="feature-card">
          <u-icon name="heart" size="40" color="#FF6B6B" />
          <text class="feature-text">贴心服务</text>
        </view>
      </view>
      
      <!-- 手动输入选项 -->
      <view class="manual-input" @click="showManualInput">
        <u-icon name="edit-pen" size="28" color="rgba(255,255,255,0.7)" />
        <text class="manual-text">手动输入桌号</text>
      </view>
    </view>

    <!-- 手动输入弹窗 -->
    <u-popup :show="showInputPopup" mode="center" @close="showInputPopup = false">
      <view class="input-popup">
        <view class="popup-title">手动输入信息</view>
        <view class="input-group">
          <text class="input-label">门店ID：</text>
          <u-input v-model="manualStoreId" placeholder="请输入门店ID" />
        </view>
        <view class="input-group">
          <text class="input-label">桌号：</text>
          <u-input v-model="manualTableNo" placeholder="请输入桌号" />
        </view>
        <view class="popup-buttons">
          <u-button type="default" @click="showInputPopup = false">取消</u-button>
          <u-button type="primary" @click="confirmManualInput">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const scanResult = ref('')
const showInputPopup = ref(false)
const manualStoreId = ref('')
const manualTableNo = ref('')

// tabBar 页面路径列表，使用 uni.switchTab 跳转
const TABBAR_PATHS = [
  '/pages/index/index',
  '/pages/scanCode/scanCode', 
  '/pages/orderFood/orderFood',
  '/pages/userCenter/userCenter'
]

function parseUrlParams(url) {
  // 支持格式: /pages/orderFood/orderFood?storeId=3&tableNo=2
  const result = { path: '', params: {} }
  if (url.startsWith('/pages/')) {
    const [rawPath, query] = url.split('?')
    result.path = rawPath
    if (query) {
      query.split('&').forEach(pair => {
        const [key, value] = pair.split('=')
        if (key && value) result.params[key] = value
      })
    }
  }
  return result
}

function scanQRCode() {
  uni.showLoading({ title: '启动扫码...', mask: true })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.scanCode({
      onlyFromCamera: true,
      success: res => {
        uni.showLoading({ title: '解析中...', mask: true })
        
        setTimeout(() => {
          const fullPath = res.result
          scanResult.value = fullPath
          const { path, params } = parseUrlParams(fullPath)
          console.log('扫码结果:', fullPath)
          console.log('解析结果:', { path, params })
          console.log('是否为tabBar页面:', TABBAR_PATHS.includes(path))
          
          if (!path) {
            uni.hideLoading()
            uni.showToast({ title: '二维码格式错误', icon: 'none' })
            return
          }

          // 本地缓存门店ID和桌号
          if (params.storeId) uni.setStorageSync('storeId', params.storeId)
          if (params.tableNo) uni.setStorageSync('tableNo', params.tableNo)

          uni.hideLoading()
          uni.showToast({ 
            title: '扫码成功！', 
            icon: 'success',
            duration: 1500
          })

          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            // 发送事件通知其他页面更新门店信息
            uni.$emit('storeInfoUpdated', {
              storeId: params.storeId,
              tableNo: params.tableNo
            })
            
            if (TABBAR_PATHS.includes(path)) {
              uni.switchTab({ url: path })
            } else {
              uni.navigateTo({
                url: path,
                fail: () => uni.switchTab({ url: path })
              })
            }
          }, 1500)
        }, 800)
      },
      fail: () => {
        uni.hideLoading()
        uni.showToast({ title: '扫描失败，请重试', icon: 'none' })
      }
    })
  }, 300)
}

// 显示手动输入弹窗
function showManualInput() {
  showInputPopup.value = true
}

// 确认手动输入
function confirmManualInput() {
  if (!manualStoreId.value || !manualTableNo.value) {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  
  // 保存到本地缓存
  uni.setStorageSync('storeId', manualStoreId.value)
  uni.setStorageSync('tableNo', manualTableNo.value)
  
  showInputPopup.value = false
  
  uni.showToast({ 
    title: '设置成功！', 
    icon: 'success',
    duration: 1500
  })
  
  // 发送事件通知其他页面更新门店信息
  uni.$emit('storeInfoUpdated', {
    storeId: manualStoreId.value,
    tableNo: manualTableNo.value
  })
  
  // 跳转到点餐页面
  setTimeout(() => {
    uni.switchTab({ url: '/pages/orderFood/orderFood' })
  }, 1500)
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 顶部标题区域 */
.header-section {
  padding: 80rpx 40rpx 60rpx;
  text-align: center;
  position: relative;
  z-index: 2;
}

.title-wrapper {
  animation: fadeInDown 1s ease-out;
}

.main-title {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 20rpx;
  text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.3);
}

.sub-title {
  display: block;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

/* 扫码区域 */
.scan-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  position: relative;
  z-index: 2;
}

.scan-frame {
  position: relative;
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 60rpx;
  animation: fadeInUp 1s ease-out 0.3s both;
}

.scan-corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  border: 6rpx solid #ffffff;
}

.corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 20rpx 0 0 0;
}

.corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 20rpx 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 20rpx;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  border-radius: 0 0 20rpx 0;
}

.scan-line {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  right: 20rpx;
  height: 4rpx;
  background: linear-gradient(90deg, transparent, #00ff88, transparent);
  animation: scanMove 2s linear infinite;
}

@keyframes scanMove {
  0% { transform: translateY(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(360rpx); opacity: 0; }
}

.scan-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  backdrop-filter: blur(10rpx);
}

.scan-btn:active {
  transform: translate(-50%, -50%) scale(0.95);
}

.scan-icon-wrapper {
  margin-bottom: 16rpx;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.scan-text {
  font-size: 24rpx;
  color: #667eea;
  font-weight: 600;
}

/* 提示区域 */
.tips-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  animation: fadeInUp 1s ease-out 0.6s both;
}

.tip-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.tip-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 底部功能区 */
.bottom-section {
  padding: 40rpx;
  position: relative;
  z-index: 2;
}

.feature-cards {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
  animation: fadeInUp 1s ease-out 0.9s both;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.feature-card:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
}

.feature-text {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.manual-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50rpx;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
  animation: fadeInUp 1s ease-out 1.2s both;
}

.manual-input:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.2);
}

.manual-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 弹窗样式 */
.input-popup {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  text-align: center;
  margin-bottom: 40rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.input-label {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.popup-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

/* 动画定义 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
